<template>
      <div>
        <div class="app-head">
          <div class="app-head-inner">
            <router-link :to="{path: '/'}">
              <img src="../assets/logo.png">
            </router-link>
            <div class="head-nav">
              <ul class="nav-list">
                <li> {{ username }}</li>
                <li v-if="username!== ''" class="nav-pile">|</li>
                <li v-if="username!== ''" @click="quit">退出</li>
                <li v-if="username=== ''" @click="show">登录</li>
                <li class="nav-pile">|</li>
               <!-- <li v-if="username=== ''" @click="regClick">注册</li>
                <li v-if="username=== ''" class="nav-pile">|</li>-->
                <li @click="aboutClick">关于</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="app-content">
          <keep-alive>
            <router-view/>
          </keep-alive>

        </div>
        <div class="app-foot">@ 2018 whimsy@sina.com</div>
        <modal name="hello-world"  :height="400" :width="656">
          <div class="box">
            <div id="bp-left" class="box-part">
              <div id="partition-register" class="partition">
                <div class="partition-title">用户登录</div>
                <div class="partition-form">
                  <form autocomplete="false">
                   <!-- <div class="autocomplete-fix">
                      <input type="password">
                    </div>-->
                    <input id="n-email" type="text" placeholder="Email">
                    <input id="n-username" type="text" placeholder="用户名">
                    <input id="n-password2" type="password" placeholder="密码">
                  </form> <div style="margin-top: 42px;">
                </div>
                <div class="button-set">
                    <button id="goto-signin-btn">登录</button>
                    <button id="register-btn">注册</button>
                  </div>
                  <button class="large-btn github-btn">connect with <span>github</span></button>
                  <button class="large-btn facebook-btn">connect with <span>facebook</span></button>
                </div>
              </div>
            </div>
            <div id="bp-right" class="box-part">
              <div class="box-messages"></div>
            </div>
          </div>
        </modal>

      </div>
</template>

<script>

export default {
  name: 'Layout',
  methods: {
    show () {
      this.$modal.show('hello-world');
    },
    hide () {
      this.$modal.hide('hello-world');
    }
  },
  data(){
    return {
      username:''
    }
  }
}

</script>

<style>
  html, body, div, span, applet, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  b, u, i, center,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td,
  article, aside, canvas, details, embed,
  figure, figcaption, footer, header, hgroup,
  menu, nav, output, ruby, section, summary,
  time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
  }
  /* HTML5 display-role reset for older browsers */
  article, aside, details, figcaption, figure,
  footer, header, hgroup, menu, nav, section {
    display: block;
  }
  body {
    line-height: 1;
  }
  ol, ul {
    list-style: none;
  }
  blockquote, q {
    quotes: none;
  }
  blockquote:before, blockquote:after,
  q:before, q:after {
    content: '';
    content: none;
  }
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  a {
    color: inherit;
    text-decoration: none;
  }
  body {
    background: #f0f2f5;
    font-family: "Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","Hiragino Sans GB W3","Microsoft YaHei UI","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
    font-size: 14px;
    color: #444;
  }
  .app-head {
    background: #363636;
    color: #b2b2b2;
    height: 90px;
    line-height: 90px;
    width: 100%;
  }
  .app-head-inner {
    width: 1200px;
    margin: 0 auto;
  }
  .head-logo {
    float: left;
  }
  .app-head-inner img {
    width: 50px;
    margin-top: 20px;
  }
  .head-nav {
    float: right;
  }
  .head-nav ul {
    overflow: hidden;
  }
  .head-nav li {
    cursor: pointer;
    float: left;
  }
  .nav-pile {
    padding: 0 10px;
  }
  .app-foot {
    text-align: center;
    height: 80px;
    width: 100%;
    line-height: 80px;
    background: #e3e4e8;
    clear: both;
    margin-top: 30px;
  }
  .container {
    width: 1200px;
    margin: 0 auto;
  }
  .hr {
    height: 1px;
    width: 100%;
    background: #ddd;
  }
  .button {
    background: #4fc08d;
    color: #fff;
    display: inline-block;
    padding: 10px 20px;
    cursor: pointer;
  }
  .button:hover {
    background: #4fc08d;
  }
  .g-form {

  }
  .g-form-line {
    padding: 15px 0;
  }
  .g-form-label {
    width: 100px;
    font-size: 16px;
    display: inline-block;
  }
  .g-form-input {
    display: inline-block;
  }
  .g-form-input input {
    height: 30px;
    width: 200px;
    line-height: 30px;
    vertical-align: middle;
    padding: 0 10px;
    border: 1px solid #ccc;
  }
  .g-form-btn {
    padding-left: 100px;
  }
  .g-form-error {
    color: red;
    padding-left: 15px;
  }


  .box {
    background: #fff;
    overflow: hidden;
    width: 656px;
    height: 400px;
    border-radius: 2px;
    box-shadow: 0 0 40px #000;
    color: #8b8c8d;
    font-size: 0;
  }

  .box .box-part {
    display: inline-block;
    position: relative;
    vertical-align: top;
    height: 100%;
    width: 50%;
  }

  .box .partition .partition-title {
    box-sizing: border-box;
    padding: 30px;
    width: 100%;
    text-align: center;
    letter-spacing: 1px;
    font-size: 20px;
    font-weight: 300;
  }

  .box .partition .partition-form {
    padding: 0 20px;
    box-sizing: border-box;
  }


  .box input[type=password], .box input[type=text] {
    display: block;
    box-sizing: border-box;
    margin-bottom: 4px;
    width: 100%;
    font-size: 12px;
    line-height: 2;
    border: 0;
    border-bottom: 1px solid #dddedf;
    padding: 4px 8px;
    font-family: inherit;
    transition: all .5s;
    outline: none;
  }

  .box button:hover {
    border-color: #c7c8c9;
    color: #6f7071;
  }


  .box button {
    background: #fff;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 10px;
    letter-spacing: 1px;
    font-family: Open Sans,sans-serif;
    font-weight: 400;
    min-width: 140px;
    margin-top: 8px;
    color: #8b8c8d;
    cursor: pointer;
    border: 1px solid #dddedf;
    text-transform: uppercase;
    transition: all .1s;
    font-size: 10px;
    outline: none;
  }
  .box #register-btn, .box #signin-btn {
    margin-left: 8px;
  }

  .box .github-btn:hover {
    border-color: #dba226;
    background: #dba226;
  }



  .box .facebook-btn {
     border-color: #3880ff;
     color: #3880ff;
   }
  .box .facebook-btn:hover {
    border-color: #3880ff;
    background: #3880ff;
  }

  .box .large-btn {
    width: 100%;
    background: #fff;
  }
  .box .large-btn:hover {
    color: #fff!important;
  }

  .box .box-part#bp-right {
    background: url(../assets/img/panorama.jpg) no-repeat 0 0;
    border-left: 1px solid #eee;
  }

  .box .box-part {
    display: inline-block;
    position: relative;
    vertical-align: top;
    height: 100%;
    width: 50%;
  }
  .box, .box .box-part {
    box-sizing: border-box;
  }
</style>
